<template>
	<view class="content">
		<swiper class="banner"   autoplay="ture" interval="2000" duration="500" circular='true' @change="swiperchange">
			<swiper-item v-for="(item,index) in thumb" :key="index">
				<image :src="item.filepath"></image>
				<view class="swipernum">
					{{current}}/{{thumb_length}}
				</view>
				{{item.filepath}}
			</swiper-item>
			
		</swiper>
		<view class="bar-name border-bottom">
			<image :src="info.logo" class="icon"></image>
			{{info.name}}
			<image src="../../static/images/shoucang-active.png" v-if="info.collect==1" @tap="shoucang()" class="shoucang"></image>
			<image src="../../static/images/shoucang.png" v-if="info.collect==0" @tap="shoucang()" class="shoucang"></image>
		</view>
		<view class="border-bottom lianxi">
			<view>{{info.start_time}}-{{info.end_time}}</view>
			<view>{{info.phone}}</view>
			<view>{{info.address}}</view>
			<image src="../../static/images/bar-phone.png" class="bar-phone" @tap="gophone(info.phone)"></image>
		</view>
		<view class="uni-row bar-info-list" >
			<view class="uni-row biao-item">
				<view class="biao-icon">
					<image src="../../static/images/barinfo1.png" ></image>
				</view>
				
				<view class="biao-name">
					<view>表演</view>
					<view>{{info.perform.perform_name}}</view>
				</view>
			</view><view class="uni-row biao-item">
				<view class="biao-icon">
					<image src="../../static/images/barinfo2.png" ></image>
				</view>
				
				<view class="biao-name">
					<view>桌子</view>
					<view>{{info.desk}}桌</view>
				</view>
			</view><view class="uni-row biao-item">
				<view class="biao-icon">
					<image src="../../static/images/barinfo3.png" ></image>
				</view>
				
				<view class="biao-name">
					<view>吸烟</view>
					<view v-if="info.smoke==1">允许抽烟</view>
					<view v-if="info.smoke==0">不允许抽烟</view>
				</view>
			</view><view class="uni-row biao-item">
				<view class="biao-icon">
					<image src="../../static/images/barinfo4.png" ></image>
				</view>
				
				<view class="biao-name">
					<view>啤酒</view>
					<view>{{info.beer}}种</view>
				</view>
			</view><view class="uni-row biao-item">
				<view class="biao-icon">
					<image src="../../static/images/barinfo5.png" ></image>
				</view>
				
				<view class="biao-name">
					<view>调酒</view>
					<view v-if="info.mixed_drink==0">无调酒</view>
					<view v-if="info.mixed_drink==1">有调酒</view>
				</view>
			</view><view class="uni-row biao-item">
				<view class="biao-icon">
					<image src="../../static/images/barinfo6.png" ></image>
				</view>
				
				<view class="biao-name">
					<view>吃饭</view>
					<view>{{info.dine_type.dine_name}}</view>
				</view>
			</view>
		</view>
		<view class="text-article" v-html="info.description">

		</view>
	</view>
</template>

<script>
    import {getlogin} from "@/static/js/login.js";
	import httpPath from '@/static/js/path.js';
	export default {
			data() {
				return {
				   current:1,//banner图当前序号
				   id:"",
				   info:{},
				   thumb:[],//banner图
				   thumb_length:0,
				   wxinfo_id:"",
				}
			},
			onShow() {
				let ss = uni.getStorageSync('user');
				if(ss){
					this.wxinfo_id=ss.wxinfo_id;
				}else{
					this.wxinfo_id=0;
				}
			},
			onLoad(option) {
				let ss = uni.getStorageSync('user');
				if(ss){
					this.wxinfo_id=ss.wxinfo_id;
				}else{
					this.wxinfo_id=0;
				}
	            this.id=option.id;
				this.getdata();
			},
			methods: {
				/**
				 *收藏店铺
				 */
				shoucang(){
					let userinfo= getlogin();
					if(userinfo){
						uni.request({
							url: httpPath.filePath+'/index/shopcollect/publish',
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: {id:this.id,wxinfo_id:this.wxinfo_id},
							success: (res) => {
								if(res.data.code==200){
									
									this.info.collect=1
								}else if(res.data.code==201){
									this.info.collect=0
									
								}  
							}
						});
					}
				},
				/**
				 * 点击电话按钮打电话
				 */
				gophone(phone){
					uni.makePhoneCall({
					    phoneNumber: phone //仅为示例
					});
				},
				/**
				 * @param {Object} banner图更换时显示当前下标
				 */
	            swiperchange(e){					
					this.current=e.detail.current+1;
				},/**
				 * 获取详情数据
				 */
				getdata(){
					
					uni.request({
						url: httpPath.filePath+'/index/store/detail',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {id:this.id,wxinfo_id:this.wxinfo_id},
						success: (res) => {
							if(res.data.code==200){
								this.info=res.data.data.msg;
								this.thumb=res.data.data.msg.thumb;
								
								this.thumb_length=this.thumb.length;
								let description= this.info.description;
								
								const regex = new RegExp('<img', 'gi');
								//判断是否头图片
								if(description.indexOf('img') != -1){
								    description= richtext.replace(regex, `<img style="max-width: 100%;"`);
								}
								this.info.description = description;
							}
							   
						}
					});
				}
			},
			
		}
</script>

<style>
	.banner{height: 750rpx;width: 100%;}
	.banner image{width: 100%;height: 100%;}
	.swipernum{position: absolute;bottom: 24rpx;left: 24rpx;height: 43rpx;width: 105rpx;border-radius: 25rpx;background: #999999;color: #fff;font-size: 24rpx;line-height: 43rpx;text-align: center;}
    .bar-name{height: 165rpx;line-height: 165rpx;font-size: 32rpx;font-weight: bold;position: relative;padding: 0rpx 32rpx;}
	.bar-name .icon{width: 90rpx;height: 90rpx;border-radius: 50%;vertical-align: middle;margin-right: 24rpx;}
	.shoucang{position: absolute;top: 70rpx;right: 20rpx;width: 41rpx;height: 35rpx;}
	.lianxi{padding:20rpx 32rpx ;position: relative;}
	.lianxi view{font-size: 28rpx;line-height: 50rpx;padding-left: 35rpx;}
	.lianxi view:nth-of-type(1){background: url(../../static/images/time-icon.png) no-repeat;background-size: 35rpx;background-position: -4rpx 10rpx;}
	.lianxi view:nth-of-type(2){background: url(../../static/images/phone.png) no-repeat;background-size: 25rpx;background-position: 0rpx 10rpx;}
	.lianxi view:nth-of-type(3){background: url(../../static/images/address.png) no-repeat;background-size: 25rpx;background-position: 0rpx 12rpx;}
    .bar-phone{position: absolute;top: 50rpx;right: 32rpx;width: 107rpx;height: 107rpx;}
	.text-article{font-size: 28rpx;line-height: 50rpx;text-indent:2em;color: #666666;padding:0rpx 32rpx 32rpx;}
	.bar-info-list{padding:20rpx 32rpx;}
	.biao-item{width: 33.3%;margin-bottom: 83rpx;}
	.biao-icon{width: 54rpx;height: 54rpx;margin-top: 30rpx;}
	.biao-icon image{width: 100%;height: 100%;}
	.biao-name{width: 174rpx;}
	.biao-name view{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	.biao-name view:nth-of-type(1){font-size: 28rpx;line-height: 50rpx;}
	.biao-name view:nth-of-type(2){font-size: 24rpx;line-height: 40rpx;color:rgba(102,102,102,1);}
</style>
